<template>
  <PageLayout>
    <!-- <template #extra>
      <div class="bg-fff p-24 mb-24">
        <div class="bg-fff d-flex j-sb card-list">
          <div>
            <div>设备总数</div>
            <div>{{ detail.totalNum }}</div>
          </div>
          <div>
            <div>异常设备数</div>
            <div>{{ detail.abnormalNum }}</div>
          </div>
          <div>
            <div>已禁用设备</div>
            <div>{{ detail.disabledNum }}</div>
          </div>
        </div>
      </div>
    </template> -->
    <!-- <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template> -->
    <div class="table-box">
      <div class="head-box">
        <div class="title">设备管理</div>
        <a-space :size="16">
          <a-button @click="downCode">批量下载二维码</a-button>
            <a-button type="primary" @click="refresh">刷新设备</a-button>
          <!-- <a-button type="primary" @click="exportFile">导出</a-button> -->
        </a-space>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable ref="tableRef" :columns="columns" :query-params="queryData" :apiFetch="postDevicePage" needSelect>
          <template #bodyCell="{ column, record }">
            <!-- <template v-if="column.key === 'deviceNo'">
              <div class="cursor-pointer" style="color: #119edd" @click="
                  router.push({
                    path: '/device/detail',
                    query: { id: record.id },
                  })
                ">
                {{ record.deviceNo }}
              </div>
            </template> -->
            <!-- <template v-if="column.key === 'action'">
              <a-space class="space-btn--box" :size="10">
                <a class="btn" v-if="record.shopId" @click="edit(record)"
                  >编辑</a
                >
                <a class="btn" v-if="record.shopId" @click="unbind(record)"
                  >解绑</a
                >
                <a class="btn" v-if="record.shopId" @click="refresh(record)"
                  >刷新版本</a
                >
                <a class="btn" v-else @click="remove(record.id)">删除</a>
              </a-space>
            </template> -->
          </template>
        </BasicTable>
      </div>
    </div>
  </PageLayout>
</template>

<script name="device-list" setup>
import {
  postDevicePage,
  postDeviceStatistics,
  postDeviceDelete,
  postDeviceUnbind,
  postDeviceRefresh,
  postDeviceExport,
  postDeviceQrDownload,
} from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { message } from "ant-design-vue";
import { onMounted } from "vue";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const queryOptions = ref([
  {
    name: "设备机器码",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "deviceSn",
    labelCol: { width: "120px" },
  },
  {
    name: "代理商名称",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "agentName",
    labelCol: { width: "120px" },
  },
  {
    name: "门店名称",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "shopName",
    labelCol: { width: "120px" },
  },
  {
    name: "省",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "province",
    labelCol: { width: "120px" },
  },
  {
    name: "市",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "city",
    labelCol: { width: "120px" },
  },
  {
    name: "区",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "area",
    labelCol: { width: "120px" },
  },
  {
    name: "开机状态",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "onlineStatus",
    list: [
      {
        label: "在线",
        value: "0",
      },
      {
        label: "离线",
        value: "1",
      },
    ],
  },
  {
    name: "使用状态",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "useStatus",
    list: [
      {
        label: "正常",
        value: "0",
      },

      {
        label: "锁机",
        value: "1",
      },
    ],
  },
]);
const detail = ref({});
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "设备编号",
    dataIndex: "deviceNo",
    key: "deviceNo",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "设备机器号",
    dataIndex: "deviceSn",
    key: "deviceSn",
    width: "200px",
    ellipsis: true,
  },

];
onMounted(() => {
  // postDeviceStatistics().then((res) => {
  //   detail.value = res.data;
  // });
});
const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const refresh = (record, val) => {
  postDeviceRefresh().then(res => {
    tableRef.value.refreshTableData();
  })
};

const edit = (record) => {
  router.push({
    path: "/device/edit",
    query: {
      id: record.id,
    },
  });
};

const unbind = (record) => {
  comfirmModal({
    content: `确认解绑`,
    onOk() {
      postDeviceUnbind({
        id: record.id,
      }).then(() => {
        message.success(`解绑成功`);
        tableRef.value.fetch();
      });
    },
  });
};
// const refresh = (record) => {
//   comfirmModal({
//     content: `确认刷新`,
//     onOk() {
//       postDeviceRefresh({
//         id: record.id,
//       }).then((res) => {
//         if (res.code == 0) {
//           message.success(`刷新版本成功`);
//           tableRef.value.fetch();
//         } else {
//           message.success(`刷新设备版本失败`);
//           // tableRef.value.fetch();
//         }
//       });
//     },
//   });
// };
// const unbind = (record) => {
//   comfirmModal({
//     content: `确认解绑`,
//     onOk() {
//       postDeviceUnbind({
//         id: record.id,
//       }).then(() => {
//         message.success(`解绑成功`);
//         tableRef.value.fetch();
//       });
//     },
//   });
// };
const remove = (id) => {
  comfirmModal({
    content: "确认删除该设备",
    onOk() {
      postDeviceDelete({ id }).then(() => {
        message.success("删除成功");
        tableRef.value.fetch();
      });
    },
  });
};
const downCode = () => {
  if (!tableRef.value.data?.length) {
    message.error("暂无数据");
    return;
  }
  if (!tableRef.value?.rowSelection?.selectedRowKeys?.length) {
    message.error("请勾选数据");
    return;
  }
  console.log('tableRef.value--', tableRef.value);
  // return
  // const params = {};

  // for (let key in queryData) {
  //   params[key] = queryData[key];
  // }
  postDeviceQrDownload({
    deviceIds: tableRef.value?.rowSelection?.selectedRows?.map(item => item.id)
  }).then((res) => {
    message.success("下载成功");
  });
};
const exportFile = () => {
  if (!tableRef.value.data?.length) {
    message.error("暂无数据");
    return;
  }
  const params = {};

  for (let key in queryData) {
    params[key] = queryData[key];
  }
  postDeviceExport(params).then((res) => {
    message.success("导出成功");
  });
};

const dataSource = ref(
  Array.from({ length: 11 }, () => ({
    spaceName: "2121",
  }))
);
</script>

<style lang="less" scoped>
.card-list {
  // margin-bottom: 24px;
  display: flex;
  gap: 50px;
  > div {
    // flex: 1;
    width: 300px;
    padding: 10px;
    // height: 100px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 48px;
    > div:first-child {
      font-size: 30px;
      font-weight: 600;
    }
    &:nth-child(1) {
      background: #02a7f0;
    }
    &:nth-child(2) {
      background: #66cc99;
    }
    &:nth-child(3) {
      background: #e62129;
    }
  }
}
</style>
